<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>multi-timeline.js: Visualisation and management of multiple timelines</title>
    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
    <script src="../bower_components/moment/min/moment.min.js"></script>
    <script src="../dist/multi-timeline.min.js"></script>

    <link rel="stylesheet" href="../dist/multi-timeline.min.css"/>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            line-height: 1.4;
        }

        .tl-wrapper {
            margin: 40px 0;
        }
    </style>
</head>
<body>

<h1>multi-timeline.js examples</h1>

<!-- ============================================== -->

<h2>Simple timeline</h2>

<div class="simple-timeline"></div>

<script>
    $(function () {
        $('.simple-timeline').multiTimeline({
            start: '2015-02-18',
            end: '2015-03-01',
            onDragEnd: function(element, timeline) {
                console.log('dragged', timeline.getData());
            },
            onResizeEnd: function(element, timeline) {
                console.log('resized', timeline.getData());
            },
            onEdit: function(element, timeline) {
                console.log('edited', timeline.getData());
            },
            data: [
                {
                    'title': 'Simple timeline',
                    'start': '2015-02-20 12:15',
                    'end': '2015-02-26',
                    'resizeable': true
                },
                {
                    'title': 'Another timeline',
                    'start': '2015-02-22',
                    'end': '2015-02-24'
                },
                {
                    'title': 'Another timeline',
                    'start': '2015-03-22',
                    'end': '2015-03-24',
                    'layer': 5
                }
            ]
        });
    })
</script>

<!-- ============================================== -->

<h2>Advanced timeline</h2>

<div class="advanced-timeline"></div>

<script>
    $(function () {
        $('.advanced-timeline').multiTimeline({
            start: '2015-02-01',
            end: '2015-02-28',
            onEdit: function(element, timeline) {
                console.log('edited', timeline.getData());
            },
            data: [
                {
                    'title': 'I have been here forever',
                    'end': '2015-02-13'
                },
                {
                    'title': 'I\'ll be here forever',
                    'start': '2015-02-14'
                },
                {
                    'title': 'I share a layer',
                    'start': '2015-02-15',
                    'end': '2015-02-18',
                    'layer': 0
                },
                {
                    'title': 'I am red and overlapping',
                    'start': '2015-02-17',
                    'end': '2015-02-22',
                    'color': '#f00',
                    'layer': 1,
                    'zIndex': 20
                },
                {
                    'title': 'I am pretty simple',
                    'start': '2015-02-10',
                    'end': '2015-02-12'
                },
            ]
        });
    })
</script>

<!-- ============================================== -->

<h2>Timeline with week numbers</h2>

<div class="weeknumbers-timeline"></div>

<script>
    $(function () {
        $('.weeknumbers-timeline').multiTimeline({
            // display weeknumbers
            xAxisUnit: 'weeks',
            xAxisDateFormat: 'ww',

            start: '2015-07-01',
            end:   '2015-07-31',
            data: [
                {
                    'title': 'A Timeline',
                    'start': '2015-07-08',
                    'end'  : '2015-07-15',
                },
                {
                    'title': 'Another Timeline',
                    'start': '2015-07-08',
                    'end': '2015-07-22',
                }
            ]
        });
    })
</script>

<!-- ============================================== -->

<h2>Timeline with phases</h2>

<div class="phase-timeline"></div>

<script>
    $(function () {
        $('.phase-timeline').multiTimeline({
            start: '2015-06-26',
            end:   '2015-07-31',
            data: [{
                    'phases': [
                        {
                            'title': 'Phase one',
                            'start': '2015-07-01',
                            'end': '2015-07-05',
                            'color': ['#333', '#444', '#555']
                        },
                        {
                            'title': 'Phase two',
                            'start': '2015-07-08',
                            'end': '2015-07-14',
                            'color': '#aaa'
                        },
                        {
                            'title': 'Phase three',
                            'start': '2015-07-20',
                            'end': '2015-07-20',
                        }
                    ]
                },
                {
                    'phases': [
                        {
                            'title': 'Phase one',
                            'start': '2015-07-04',
                            'end': '2015-07-08',
                        },
                        {
                            'title': 'Phase two',
                            'start': '2015-07-10',
                            'end': '2015-07-12',
                        },
                        {
                            'title': 'Phase three',
                            'start': '2015-07-12',
                            'end': '2015-07-12',
                        }
                    ]
                },
            ]
        });
    })
</script>

<!-- ============================================== -->

<h2>Timeline with controls</h2>

<div class="controls-timeline"></div>

<div class="controls">
    <button type="button" class="js-go-left">Go left</button>
    <button type="button" class="js-go-right">Go right</button>
    <input type="range" id="range" min="0" max="40" value="5" class="js-set-zoom"/>

    <button type="button" class="js-zoom-out">Zoom out</button>
    <button type="button" class="js-zoom-in">Zoom in</button>
</div>
<script>
    $(function () {
        var timeline = $('.controls-timeline').multiTimeline({
            start: '2015-02-01',
            end: '2015-02-28',
            zoom: 4,
            zoomOutControl: $('.js-zoom-out'),
            zoomInControl: $('.js-zoom-in'),
            goRightControl: $('.js-go-right'),
            goLeftControl: $('.js-go-left'),
            onZoomChange: function (newZoom) {
                $('.js-set-zoom').val(newZoom);
            },
            onTimelineClick: function (event, data) {
                alert('You clicked on a timeline: ' + data.title);
            },
            data: [
                {
                    'title': 'I have been here forever',
                    'end': '2015-02-13'
                },
                {
                    'title': 'I\'ll be here forever',
                    'start': '2015-02-14'
                },
                {
                    'title': 'I share a layer',
                    'start': '2015-02-15',
                    'end': '2015-02-18',
                    'layer': 0
                },
                {
                    'title': 'I am red and overlapping',
                    'start': '2015-02-17',
                    'end': '2015-02-22',
                    'color': '#f00',
                    'layer': 1,
                    'zIndex': 20
                },
                {
                    'title': 'I am pretty simple',
                    'start': '2015-02-10',
                    'end': '2015-02-12'
                },
            ]
        });
        $('.js-set-zoom').on('change', function () {
            timeline.data('multiTimeline').setZoom(this.value);
        });
    })
</script>
</body>
</html>
